<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/bootstrap.min.css">
    <link rel="stylesheet" href="./css/index.css">
</head>
<body>
    <div class="container" v-cloak>
        <h3 class="text-center text-primary title">用户信息管理</h3>
        <!-- table>(thead>tr>th*7)+(tbody>tr>td*7)+tfoot>tr>td*7 -->
        <table class="table table-bordered table-hover table-sm">
            <thead>
                <tr class="text-center bg-primary text-light">
                    <th><input type="checkbox" v-model="all" @change="checkAll">全选</th>
                    <th>序号</th>
                    <th>姓名</th>
                    <th>年龄</th>
                    <th>性别</th>
                    <th>邮箱</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>
                <tr class="text-center" v-for="(item,index) in users" :key="index">
                    <td><input type="checkbox" v-model="item.state" @change="checkItem"></td>
                    <td>{{ index+1 }}</td>
                    <td>{{ item.name }}</td>
                    <td>{{ item.age }}</td>
                    <td>{{ item.sex }}</td>
                    <td>{{ item.email }}</td>
                    <td>
                        <button class="btn btn-danger" data-toggle="modal" data-target="#del" @click="nowIndex=index">删除</button>
                        <button class="btn btn-success" data-toggle="modal" data-target="#modify" @click="user=JSON.parse(JSON.stringify(item))">修改</button>
                    </td>
                </tr>
            </tbody>
            <tfoot>
                <tr class="text-center" v-if="users.length!=0">
                    <td>
                        <button class="btn btn-danger" data-toggle="modal" data-target="#del" @click="nowIndex=-2">多选删除</button>
                    </td>
                    <td colspan="5"></td>
                    <td>
                        <button class="btn btn-danger" data-toggle="modal" data-target="#del" @click="nowIndex=-1">删除全部</button>
                    </td>
                </tr>
                <tr class="text-center" v-else>
                    <td colspan="7">
                        <p class="text-muted">暂无数据.....</p>
                    </td>
                </tr>
            </tfoot>
        </table>
        <hr>

        <form>
            <div class="form-group row">
              <label for="name" class="col-sm-2 col-form-label offset-sm-2 text-right">姓 名：</label>
              <div class="col-sm-6">
                <input type="text" class="form-control" id="name" placeholder="请输入姓名" v-model="user.name">
            </div>
            </div>
            <div class="form-group row">
                <label for="age" class="col-sm-2 col-form-label offset-sm-2 text-right">年 龄：</label>
                <div class="col-sm-6">
                  <input type="text" class="form-control" id="age" placeholder="请输入年龄" v-model="user.age">
                </div>
            </div>
            <div class="form-group row">
                <label for="sex" class="col-sm-2 col-form-label offset-sm-2 text-right">性 别：</label>
                <div class="col-sm-6" style="display: flex; align-items: center;">
                    <div class="form-check form-check-inline">
                        <input class="form-check-input" type="radio" name="sex" id="male" value="男" v-model="user.sex" checked>
                        <label class="form-check-label" for="male">男</label>
                    </div>
                    <div class="form-check form-check-inline">
                        <input class="form-check-input" type="radio" name="sex" id="female" v-model="user.sex" value="女">
                        <label class="form-check-label" for="female">女</label>
                    </div>
                </div>
            </div>
            <div class="form-group row">
                <label for="email" class="col-sm-2 col-form-label offset-sm-2 text-right">邮 箱：</label>
                <div class="col-sm-6">
                  <input type="text" class="form-control" id="email" placeholder="请输入邮箱" v-model="user.email">
                </div>
            </div>
            <div class="form-group text-center">
                <button type="button" class="btn btn-primary" :disabled="!user.name||!user.age||!user.email" @click="addUser">添  加</button>
                <button type="button" class="btn btn-primary" @click="resetUser">重  置</button>
            </div>
        </form>

        <!-- 删除模态框 -->
        <div class="modal" tabindex="-1" role="dialog" id="del">
            <div class="modal-dialog" role="document">
              <div class="modal-content">
                <div class="modal-header">
                  <h5 class="modal-title">提示消息</h5>
                  <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                  </button>
                </div>
                <div class="modal-body text-center">
                  <p v-show="nowIndex>=0">确定要删除用户：{{ users[nowIndex] ? users[nowIndex].name : '' }} 吗？</p>
                  <p v-show="nowIndex==-1">确定要删除所有用户吗？</p>
                  <p v-show="nowIndex==-2">确定要删除选中的用户吗？</p>
                </div>
                <div class="modal-footer">
                  <button type="button" class="btn btn-primary" data-dismiss="modal" @click="deleteUser">确定</button>
                  <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
                </div>
              </div>
            </div>
        </div>
        <!-- 修改模态框 -->
        <div class="modal" tabindex="-1" role="dialog" id="modify">
            <div class="modal-dialog" role="document">
              <div class="modal-content">
                <div class="modal-header">
                  <h5 class="modal-title">修改用户</h5>
                  <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                  </button>
                </div>
                <div class="modal-body text-center">
                    <form>
                        <div class="form-group row">
                          <label for="name" class="col-sm-2 col-form-label offset-sm-2 text-right">姓 名：</label>
                          <div class="col-sm-6">
                            <input type="text" class="form-control" id="name" placeholder="请输入姓名" v-model="user.name">
                        </div>
                        </div>
                        <div class="form-group row">
                            <label for="age" class="col-sm-2 col-form-label offset-sm-2 text-right">年 龄：</label>
                            <div class="col-sm-6">
                              <input type="text" class="form-control" id="age" placeholder="请输入年龄" v-model="user.age">
                            </div>
                        </div>
                        <div class="form-group row">
                            <label for="sex" class="col-sm-2 col-form-label offset-sm-2 text-right">性 别：</label>
                            <div class="col-sm-6" style="display: flex; align-items: center;">
                                <div class="form-check form-check-inline">
                                    <input class="form-check-input" type="radio" name="sex" id="male" value="男" v-model="user.sex" checked>
                                    <label class="form-check-label" for="male">男</label>
                                </div>
                                <div class="form-check form-check-inline">
                                    <input class="form-check-input" type="radio" name="sex" id="female" v-model="user.sex" value="女">
                                    <label class="form-check-label" for="female">女</label>
                                </div>
                            </div>
                        </div>
                        <div class="form-group row">
                            <label for="email" class="col-sm-2 col-form-label offset-sm-2 text-right">邮 箱：</label>
                            <div class="col-sm-6">
                              <input type="text" class="form-control" id="email" placeholder="请输入邮箱" v-model="user.email">
                            </div>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                  <button type="button" class="btn btn-primary" data-dismiss="modal" @click="modifyUser">修改</button>
                  <button type="button" class="btn btn-secondary" data-dismiss="modal" @click="resetUser">取消</button>
                </div>
              </div>
            </div>
        </div>
    </div>    
</body>
<script src="./js/vue.js"></script>
<script src="./js/jquery.min.js"></script>
<script src="./js/bootstrap.min.js"></script>
<script src="./js/index.js"></script>
</html>